import React, { useReducer } from "react";

const formReducer = (state, action) => {
    console.log(action);

    return {
        ...state,
        ...action,
    };
}

function FormHook() {
  // const ref = useRef();
//   const [values, setValues] = useState({
//     user: "",
//     pwd: "",
//   });
    

    const [values, dispatch] = useReducer(formReducer, {
        user: '',
        pwd: ''
    });

  // const newValues = { ...values };
  // newValues.user = event.target.value;

  // Object.assign({}, values, {user: 123})

//   const setFields = (key, value) => {
//     // Bad
//     // values[key] = value;
//     setValues({ ...values, [key]: value });
//   };

    // const setFields = (key, value) => {
    //     dispatch({[key]: value});
    // }
    
  console.log(values);

  return (
    <>
      <input
        placeholder="用户名"
        type="text"
        value={values.user}
        onChange={(e) => {
          dispatch({ user: e.target.value });
        }}
      />
      <input
              placeholder="密码"
              type="text"
              value={values.pwd}
              onChange={(e) => {
                  dispatch({ pwd: e.target.value });
              }}
      />
      <button>提交</button>

      {/* <button onClick={() => {console.log(ref);}}>Get Value</button> */}
    </>
  );
}

export default FormHook;
